<template>
  <div class="appointmentHistory wh100">
    <navBar title="预约历史"  :leftArrowFlag="true"></navBar>
    <van-tabs v-model="active" animated swipeable :before-change="beforeChange" @click="tabChange" @change="tabChange">
      <van-tab title="审核中">
        <div class="list_content">
         <vantList  :list='list' :loading='loading' :finished='finished' :refreshing='refreshing' @getList='getList' @refresh='refresh'>
           <div class="list" v-for="(item,index) in list" :key="index">
             <historyItem :item='item'></historyItem>
           </div>
         </vantList>
        </div>
      </van-tab>
      <van-tab title="待付款">
          <div class="list_content">
         <vantList  :list='list' :loading='loading' :finished='finished' :refreshing='refreshing' @getList='getList' @refresh='refresh'>
           <div class="list" v-for="(item,index) in list" :key="index">
             <historyItem :item='item'></historyItem>
           </div>
         </vantList>
        </div>
      </van-tab>
      <van-tab title="已取消">
        <div class="list_content">
         <vantList  :list='list' :loading='loading' :finished='finished' :refreshing='refreshing' @getList='getList' @refresh='refresh'>
           <div class="list" v-for="(item,index) in list" :key="index">
             <historyItem :item='item'></historyItem>
           </div>
         </vantList>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <div class="list_content">
         <vantList  :list='list' :loading='loading' :finished='finished' :refreshing='refreshing' @getList='getList' @refresh='refresh'>
           <div class="list" v-for="(item,index) in list" :key="index">
             <historyItem :item='item'></historyItem>
           </div>
         </vantList>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import navBar from "@/components/navBar";
import vantList from '@/components/list';
 import historyItem from './components/historyItem'

// import {getDeadList} from '@/api/user'
export default {
  name: "news",
  data() {
    return {
      active:0,
      list: [
       
      ],
      loading:false,
      finished:false,
      refreshing:false,
      pageSize: 10,
      currentPage: 1,
    };
  },
  components: {
    navBar,
    vantList,
     historyItem
  },
  methods: {
    //tab切换之前
    beforeChange(){
      if(this.loading){
        return false
      }
    },
    //tab切换
    tabChange(name,title){
      this.list=[];
      this.active=name;
      this.currentPage=1;
      this.finished = false;
      this.loading = false;
      this.refreshing=false;
      this.getList(true)
    },
    //请求数据
    async getList(){
      this.loading=true
     const { currentPage, pageSize } = this;
      let params = {
        currentPage,
        pageSize,
      };
      let res = await getDeadList(params);
      
      if (res.code === 1) {
        let list =  res.data.list|| [];
        //根据总条数处理
        if(this.list.length<res.data.pager.total){
          this.list=[...this.list,...res.data.list];
          this.currentPage++
        }else{
          this.finished = true;
        }
        this.loading = false;
        this.refreshing=false;
        
      }

    },
    //下拉刷新
    refresh(){
      this.refreshing=true;
      // 清空列表数据
      this.currentPage=1;
      this.list=[];
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getList();
    }
  },
};
</script>

<style lang="scss" scoped>
.appointmentHistory {
    display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
    -moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
    /deep/ .van-tabs{
        flex:1;
        display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
        -moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
        .van-tabs__content {
            flex:1;
            .van-tab__pane{
                height: 100%;
            }
        }
    }
  /deep/ .van-tabs--line .van-tabs__wrap{
    padding: 0.1rem 0;
    height: auto;
    .van-tabs__nav{
      justify-content: space-around;
      padding-bottom: 0;
      .van-tabs__line{
        display: none;
      }
      .van-tab{
        width: 0.8rem;
        height:0.3rem;
        background: #EFEFEF;
        color: $lightBlack;
        flex:none;
        border-radius: 0.05rem;
      }
      .van-tab--active{
        background: $defaultColor;
        color: #fff;
      }
    }
    
  }
  .list_content{
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background: #F9F9F9;
    // height: calc(100vh - 1.4rem);
    padding: 0 0.125rem;
    height: 100%;
    width: 100%;
   /deep/ .van-list{
    width:100%;
    .list_item{
      width: 100%;
      height: 0.8rem;
    }
  } 

  }
  
  
}
</style>